<template>
	<view>
		<view v-for="orderitem in order" class="order">
			<view class="ordertit">
				<p class="ordername">
					{{orderitem.name}}
				</p>
			</view>
			<view class="order-shop">
				<u-line color="#E4E4E4"></u-line>
				<view class="order-shop-main" v-for="ordercontent in orderitem.content">
					<view class="order-shop-body">
						<image :src="ordercontent.img" class="order-shop-img"></image>
							<view class="ordercontent">
								<p class="ordercontent-title">{{ordercontent.name}}</p>
								<p class="ordercontent-dec">{{ordercontent.description}}</P>
								<p class="ordercontent-dec">x {{ordercontent.num}}</p>
							</view>
					</view>
					<p style="margin-top: 5px;">￥{{ordercontent.price}}</p>
				</view>
				<view class="ordercount">
					<u-line color="#E4E4E4"></u-line>
					<p style="margin-top: 5px;">共{{orderitem.num}}件商品，实付<span style="font-weight: 700;color: black;">￥{{orderitem.pay}}</span>
					</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		order: "order"
	})
</script>

<style scoped>
	.order {
		margin: 0 auto;
		margin-top: 10px;
		width: 90%;
		background-color: white;
		border-radius: 5px;
		overflow: hidden;
		padding: 10px;
	}

	.ordertit {
		display: flex;
		justify-content: space-between;
	}

	.orderstatus {
		color: #5F5F5F;
		font-size: 14px;
	}

	.order-shop {
		margin-top: 20rpx;
	}

	.order-shop-main {
		display: flex;
		justify-content: space-between;
	}
	.order-shop-body{
		display: flex;
	}

	.order-shop-img {
		margin-top: 5px;
		padding: 5px;
		width: 50px;
		height: 50px;
		object-fit: cover;
	}

	.ordername {
		font-size: 17px;
		font-weight: 700;
	}

	.order-shop-con {
		display: flex;
		flex-direction: column;
	}

	.ordercontent {
		display: flex;
		flex-direction: column;
		align-items: space-between;
		margin-top: 5px;
		font-size: 13px;
		color: #767676;
	}

	.ordercontent-title {
		width: 150px;
		font-size: 15px;
		color: black;
		font-weight: 500;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ordercontent-dec {
		font-size: 13px;
		font-weight: 300;
	}

	.ordercount {
		width: 100%;
		text-align: right;
		color: #5F5F5F;
		font-size: 14px;
		margin-top: 5px;
	}

	.orderbtn {
		margin-top: 10px;
	}
</style>